<!--
 * @Author: 叫我龟先生 yyxxkahhh@163.com
 * @Date: 2022-11-09 20:29:28
 * @LastEditors: 叫我龟先生 yyxxkahhh@163.com
 * @LastEditTime: 2022-11-14 15:16:54
 * @FilePath: \lanxiangdkk\src\module-manage\pages\permissions.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<el-card class="page-tools">
 <el-input v-model="value" placeholder="根据用户名搜索" clearable style="width:200px"  ></el-input>
  <el-button class="btn" @click="qingkong" >清空</el-button>
  <el-button type="primary" @click="search" >搜索</el-button>
    <el-button type="success" class="btn1" fixed="right" @click="handleAdd" >新增权限组</el-button>
  <el-row type="flex" justify="space-between" align="middle">
  <el-alert title="共3条记录" type="info" show-icon class="alert" ></el-alert>
 </el-row>
 <el-table class="table" ref="multipleTable"  tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    :default-sort = "{prop: 'date', order: 'descending'}"
    :data="listInfo"
     >
  <el-table-column type="selection" width="160"></el-table-column>
  <el-table-column label="用户名" prop="title" width="160"  align="center"  />
  <el-table-column label="日期" prop="update_date" align="center" sortable>
    <template slot-scope="{row}">
      {{row.update_date | parseTimeByString}}
    </template>
  </el-table-column>
  <el-table-column label="操作" align="center" >
    <template slot-scope="{ row }" >
            <button type="button" class="el-button el-button--primary el-button--medium is-plain is-circle" @click="handleEdit(row)" >
              <i class="el-icon-edit" ></i>
            </button>
            <button type="button" class="el-button el-button--danger el-button--medium is-plain is-circle" @click="handleDel(row)" >
              <i class="el-icon-delete" ></i>
            </button>
    </template>
  </el-table-column>
 </el-table>
 <permissionsAdd
 ref="permissionsAdd"
 :text='text'
 :pageTitle='pageTitle'
 :ruleInline='rules'
 @newDataes="newDataes"
 ></permissionsAdd>
 <pageTool
 style="margin-left:900px"
 @pageChange="pageChange"
 :total="counts"
 :paginationPage="requestData.page"
 :paginationPagesize="requestData.pagesize"
 >
 </pageTool>
 </el-card>
</template>
<script>
import { list1, remove } from '@/api/base/permissions'
import permissionsAdd from '@/module-manage/components/permissions-add.vue'
import pageTool from '@/module-manage/components/page-tool.vue'
export default {
  components: {
    permissionsAdd,
    pageTool
  },
  data () {
    return {
      value: '',
      multipleSelection: [],
      requestData: {
        page: 1,
        pagesize: 10,
        pages: 1,
        title: ''
      },
      listInfo: [],
      pageTitle: '权限组',
      text: '',
      rules: {
        title: [{ required: true, message: '用户名不能为空', trigger: 'blur' }]
      },
      counts: ''
    }
  },
  created () {
    this.listTable()
  },
  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    async listTable () {
      const res = await list1(this.requestData)
      this.listInfo = res.data.list
      // console.log(res)
    },
    qingkong () {
      this.value = ''
    },
    async search () {
      this.requestData.title = this.value
      const res = await list1(this.requestData)
      this.listInfo = res.data.list
      this.value = ''
    },
    handleAdd () {
      // console.log(1111)
      this.$refs.permissionsAdd.dialogFormV()
      this.text = '创建'
    },
    handleEdit (row) {
      this.$refs.permissionsAdd.dialogFormV()
      this.text = '编辑'
      this.$refs.permissionsAdd.hanldeEditForm(row.id)
    },
    // 删除
    async handleDel (row) {
      try {
        await this.$confirm('您确定要删除吗', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        }).then(async () => {
          await remove(row)
          this.listTable()
          this.$message.success('删除员工成功')
        })
      } catch (e) {
        console.log(e)
      }
    },
    pageChange (page) {
      console.log(page)
    },
    newDataes () {
      this.listTable()
    }
  }
}

</script>
<style lang='scss'>
.page-tools {
 margin: 10px 20px;
 .dialog{
  margin-left: 10px;
 }
 .btn{
  margin-left: 10px;
 }
 .before {
  line-height: 34px;
  display: inline-block;
  border-radius: 3px;
  i {
   margin-right: 5px;
  }
 }
 .alert{
  margin: 20px 0;
 }
 .table{
  padding: 10px 0;
 }
}
</style>
